<template>
  <view class="w-[750rpx] min-h-screen bg-gray-50">
    <!-- Header -->
    <view class="bg-white px-[32rpx] py-[24rpx] shadow-sm">
      <text class="text-[32rpx] font-bold text-gray-800">主页面</text>
    </view>

    <!-- Navigation Grid -->
    <view class="p-[32rpx]">
      <view class="grid grid-cols-2 gap-[24rpx]">
        <view 
          v-for="item in menuItems" 
          :key="item.id"
          class="bg-white rounded-[16rpx] p-[32rpx] shadow-sm"
          @click="navigateTo(item.path)"
        >
          <view class="flex flex-col items-center">
            <IconFont :name="item.icon" size="48" class="text-blue-500 mb-[16rpx]" />
            <text class="text-[28rpx] text-gray-800 font-medium">{{ item.title }}</text>
            <text class="text-[24rpx] text-gray-500 mt-[8rpx]">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Quick Actions -->
    <view class="px-[32rpx] pb-[32rpx]">
      <text class="text-[28rpx] font-bold text-gray-800 mb-[24rpx] block">快捷操作</text>
      <view class="bg-white rounded-[16rpx] p-[24rpx]">
        <view 
          v-for="action in quickActions" 
          :key="action.id"
          class="flex items-center justify-between py-[20rpx] border-b border-gray-100 last:border-b-0"
          @click="navigateTo(action.path)"
        >
          <view class="flex items-center">
            <IconFont :name="action.icon" size="24" class="text-gray-600 mr-[16rpx]" />
            <text class="text-[28rpx] text-gray-800">{{ action.title }}</text>
          </view>
          <IconFont name="right" size="16" class="text-gray-400" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

interface MenuItem {
  id: number
  title: string
  desc: string
  icon: string
  path: string
}

interface QuickAction {
  id: number
  title: string
  icon: string
  path: string
}

const menuItems = ref<MenuItem[]>([
  {
    id: 1,
    title: '分类一',
    desc: '功能描述',
    icon: 'category',
    path: '/views/category1'
  },
  {
    id: 2,
    title: '分类二',
    desc: '功能描述',
    icon: 'setting',
    path: '/views/category2'
  },
  {
    id: 3,
    title: '分类三',
    desc: '功能描述',
    icon: 'user',
    path: '/views/category3'
  },
  {
    id: 4,
    title: '分类四',
    desc: '功能描述',
    icon: 'service',
    path: '/views/category4'
  }
])

const quickActions = ref<QuickAction[]>([
  {
    id: 1,
    title: '子功能 1-1',
    icon: 'star',
    path: '/views/sub1-1'
  },
  {
    id: 2,
    title: '子功能 1-2',
    icon: 'heart',
    path: '/views/sub1-2'
  },
  {
    id: 3,
    title: '子功能 1-3',
    icon: 'location',
    path: '/views/sub1-3'
  }
])

const navigateTo = (path: string) => {
  Taro.navigateTo({
    url: path,
    success: () => {
      Taro.showToast({
        title: '页面跳转成功',
        icon: 'success',
        duration: 1500
      })
    },
    fail: () => {
      Taro.showToast({
        title: '页面跳转失败',
        icon: 'error',
        duration: 1500
      })
    }
  })
}
</script>